* {
    margin: 0;
    padding: 0%;
}
body {
    height: 100vh;
    background: linear-gradient(200deg, #ddd6f3, #faaca8);
}
// 三个元素都需要弹性布局
body,
.navbar,
.navbar ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar {
    position: relative;
    padding: 20px;
    background-color: #fff;
    border-radius: 50px;

    input {
        width: 40px;
        height: 40px;
        &:checked {
            // // 兄弟选择器
            ~ ul {
                width: 350px;
            }

            ~ span:nth-child(2) {
                top: calc(50% - 2px);
                transform: rotate(45deg);
                background-color: #fb7299;
                transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
            }

            ~ span:nth-child(3) {
                top: calc(50% - 2px);
                transform: rotate(-45deg);
                background-color: #fb7299;
                transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
            }
        }
        opacity: 0;
        cursor: pointer;
    }

    span {
        position: absolute;
        background-color: #999;
        left: 25px;
        width: 30px;
        height: 4px;
        top: calc(50% - 10px);
        border-radius: 15px;
        // 这个span在上面，点不中复选框，可以用这个属性来解决
        pointer-events: none;
        // 寻找父元素的第三个元素，也就是第二个span
        &:nth-child(3) {
            top: calc(50% + 8px);
        }
        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out 0.3s;
    }

    ul {
        width: 0;
        overflow: hidden;
        transition: all 0.5s;
        // 禁止换行
        white-space: nowrap;
        li {
            list-style: none;
            margin: 0px 15px;
            a {
                text-decoration: none;
                font-size: 20px;
                font-weight: 700;
                color: #333;
                &:hover {
                    color: #fb7299;
                }
            }
        }
    }
}
